<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<head>
    <title>登录界面</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: #f3f3f3;
        }

        .control {
            width: 340px;
            background: white;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 5px;
        }

        .item {
            width: 340px;
            height: 60px;
            display: flex;
            background: #eeeeee;
        }

        .item div {
            width: 170px;
            height: 60px;
            display: inline-block;
            color: black;
            font-size: 18px;
            text-align: center;
            line-height: 60px;
            cursor: pointer;
        }

        .content {
            width: 100%;
        }

        .content div {
            margin: 20px 30px;
            display: none;
            text-align: left;
        }

        p {
            color: #4a4a4a;
            margin-top: 30px;
            margin-bottom: 6px;
            font-size: 15px;
        }

        .content input[type="text"], .content input[type="password"] {
            width: 100%;
            height: 40px;
            border-radius: 3px;
            border: 1px solid #adadad;
            padding: 0 10px;
            box-sizing: border-box;
        }

        .content input[type="submit"] {
            margin-top: 40px;
            width: 100%;
            height: 40px;
            border-radius: 5px;
            color: white;
            border: 1px solid #adadad;
            background: #009688;
            cursor: pointer;
            letter-spacing: 4px;
            margin-bottom: 40px;
        }

        .active {
            background: white;
        }

        .item div:hover {
            background: #f6f6f6;
        }
    </style>
    <script type="text/javascript">
        function onCheckLogin() {
            const username = document.getElementById("username");
            const password = document.getElementById("password");
            if (username.value == '' && password.value == '') {
                window.alert("账号和密码均不能为空!");
                return false;
            } else if (password.value == '') {
                window.alert("密码不能为空!");
                return false;
            } else if (username.value == '') {
                window.alert("账号不能为空！");
                return false;
            }
        }

        function onCheckRegister() {
            const username = document.getElementById("username1");
            const password1 = document.getElementById("password1");
            const password2 = document.getElementById("password2");
            const telephone = document.getElementById("telephone");
            const myreg = /^1\d{10}$/;
            if (username.value == '' && password.value == '' && telephone.value == '') {
                window.alert("您还未填写任何信息!");
                return false;
            } else if (username.value == '') {
                window.alert("用户名不能为空！");
                return false;
            } else if (password1.value == '' || password2.value == '') {
                window.alert("密码不能为空!");
                return false;
            } else if (telephone.value == '') {
                window.alert("手机号不能为空！");
                return false;
            } else if (password2.value != password1.value) {
                alert("前后两此输入密码不一致请重新输入密码！")
                document.getElementById("password1").value = "";
                document.getElementById("password2").value = "";
                return false;
            } else if (!myreg.test(telephone.value)) {
                alert("手机号码有误，请重填!");
                return false;
            }

        }


        window.onload = function () {
            const item = document.getElementsByClassName("item");
            const it = item[0].getElementsByTagName("div");

            const content = document.getElementsByClassName("content");
            const con = content[0].getElementsByTagName("div");

            for (let i = 0; i < it.length; i++) {
                it[i].onclick = function () {
                    for (let j = 0; j < it.length; j++) {
                        it[j].className = '';
                        con[j].style.display = "none";
                    }
                    this.className = "active";
                    it[i].index = i;
                    con[i].style.display = "block";
                }
            }
        }
    </script>
</head>


<body>
<img width="100%" height="100%" src="images/one.jpg" style="position:absolute; left:0; top:0; z-index:-1;"/>
<%--   int counter=1;--%>
<div class="control">
    <div class="item">
        <div class="active">登录</div>
        <div>注册</div>
    </div>
    <div class="content">
        <div style="display: block;">
            <form action="login" method="post" name="login" id="forms" onsubmit="return onCheckLogin()">
                <p>账号</p>
                <input type="text" id="username" name="username" placeholder="username"/>
                <p>密码</p>
                <input type="password" id="password" name="password" placeholder="password"/>
                <br/>
                <p style="margin-top: 30px">
                <p style="display: inline; margin-left: 30px"><input type="radio" name="identity" value="user" checked="true"> 用户登陆</p>
                <p style="display: inline; margin-left: 30px"><input type="radio" name="identity" value="manager"> 管理员登陆
                </p>
                </p>

                <p style="color: red ;text-align:center">${errs}</p>

                <input type="submit" value="登录"/>
            </form>
        </div>
        <div>
            <form action="register" method="post" name="register" id="register" onsubmit="return onCheckRegister()">
                <!--

                <input  style="display: none"  name="id" value=  =counter
                 counter++;
                -->
                <p>用户名</p>
                <input type="text" id="username1" name="username" placeholder="username"/>
                <p>密码</p>
                <input type="password" id="password1" name="password" placeholder="password"/>
                <p>确认密码</p>
                <input type="password" id="password2" placeholder="password"/>
                <p>手机号</p>
                <input type="text" id="telephone" name="telephone" placeholder="telephone"/>
                <br/>
                <input type="submit" value="注册"/>
            </form>
        </div>
    </div>

</div>
</body>
</html>